<template>
  <div class="connect">
    <div class="connect_tab">
      <span>异常订单查询</span>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('Order_module.Order_No')">
          <el-input v-model="formInline.orderNumber" :placeholder="$t('Order_module.Order_No')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Order_module.Batch_number')">
          <el-input v-model="formInline.manifestNo" :placeholder="$t('Order_module.Batch_number')"></el-input>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{$t('public.query')}}</el-button>
          <el-button type="primary" @click="resetting">{{$t('public.resetting')}}</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" border style="width: 100%;margin-top:2vh;">

        <!-- 订单号 -->
         <el-table-column min-width="180px" prop="orderNumber" :label="$t('Order_module.Order_No')" align="center" ></el-table-column>
        <!-- 批次号 -->
         <el-table-column min-width="180px" prop="manifestNo" :label="$t('Order_module.Batch_number')" align="center" ></el-table-column>
         <!-- 公司名称 -->
         <el-table-column min-width="120px" prop="userName" :label="$t('Order_module.corporate_name')" align="center" ></el-table-column>
         <!-- 收件人姓名 -->
         <el-table-column min-width="120px" prop="consigneeName" :label="$t('Order_module.Recipient_Name')" align="center" ></el-table-column>
         <!-- 失败原因 -->
         <el-table-column min-width="120px  " prop="reason" :label="$t('public.Reason_for_push_failure')" align="center" ></el-table-column>
         <!-- 创建时间 -->
         <el-table-column min-width="200px" prop="createTime" :label="$t('Order_module.creation_date')" align="center" ></el-table-column>
          <el-table-column
              fixed="right"
              align="center"
              :label="$t('public.operate')"
              width="100">
              <template slot-scope="{row}">
                <el-button @click="piaoEdit(row.id , 2)" type="text" size="small">{{$t('public.Edit_Order')}}</el-button>
              </template>
            </el-table-column>
       </el-table>
      <el-pagination
      style="margin-top: 20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      <el-dialog
        :title="$t('Order_module.place_an_order')"
        :visible.sync="piaoShow"
        :close-on-click-modal="false"
        width="60%"
        top="5vh"
        :before-close="handlepiaoClose">
          <orderInfo v-if="piaoShow" :id="seeInfo_id" @getList="getList"  @closepop = "handlepiaoClose" :piao_type="piao_type" ref="orderInfoRef" ></orderInfo>

      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    order_abnormalList,
  } from '@/api/wqzApi'
  import orderInfo from '@/components/order_info';
  export default {
    components:{
      orderInfo
    },
    data() {
      return {
        piaoShow:false,
        seeInfo_id:null,
        piao_type:null,
        page:1,
        limit:10,
        total:100,
        formInline:{
          orderNumber:'',
          manifestNo:''
        },
        list:[

        ]
      }
    },
    created() {
    },
    mounted() {
      this.getList()

    },
    destroyed() {

    },
    methods: {
      resetting(){
        this.formInline={
          orderNumber:'',
          manifestNo:''
        }
        this.page = 1
        this.getList()
      },
      handlepiaoClose(){
        this.piaoShow = !this.piaoShow
      },
      piaoEdit(id , type){
        // 订单修改弹出层
        console.log(id , type)
        this.piao_type = type
        this.piaoShow = !this.piaoShow
        setTimeout(()=>{
          this.$refs.orderInfoRef.piaoEdit(id , type)
        },100)
      },
      getList(){
        var data={
          page:this.page,
          limit:this.limit,
          ...this.formInline
        }
        order_abnormalList(data).then(res=>{
          console.log(res , '返回信息')
          this.list = res.page.list
          this.total = res.page.totalCount
        })
      },
      onSubmit(){
        this.page = 1
        this.getList()
      },
      handleSizeChange(){},
      handleCurrentChange(){},
    }
  }
</script>

<style scoped>
  @import url('abnormal_orders.css');
</style>
